<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangzhanhua
 * @Date: 2020-12-26 14:43:43
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-05-28 14:18:10
-->
<template>
    <div class="progressShip">
        <el-progress :show-text="false" ref="svg" :stroke-width="6" :percentage="precents" :color="pColor" :style="{background:bColor,borderRadius:'100px'}"></el-progress>
        <div class="shipImg">
            <!-- <i class="iconfont">&#xe675;</i> -->
            <!-- <img src="../../assets/icon/船.png" alt="" width="15px" height="15px"> -->
            <!-- <el-tooltip popper-class="atooltip" class="item" effect="dark" :content="precent+'%'" :value="true" :manual='true'>
        <div class="img" :style="{left:precents>18?'-40px':'0'}"></div>
      </el-tooltip> -->
            <div class="img" :style="{left:precents>82?'82%':precents+'%'}"></div>
            <div ref="tipBox" class="tipBox11" :style="{left:precents+'%'}">
                <p> {{precent}}%</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        //百分比
        precent: {
            type: String | Number,
            default: 0
        },
        //颜色
        pColor: {
            type: Array,
            default: () => {
                return [
                    { color: '#1989fa', percentage: 20 },
                    { color: '#1989fa', percentage: 40 },
                    { color: '#1989fa', percentage: 60 },
                    { color: '#1989fa', percentage: 80 },
                    { color: '#1989fa', percentage: 100 }
                ]
            }
        },
        //底色
        bColor: {
            type: String,
            default: '#EBEEF5'
        }

    },
    // watch: {
    //   bColor(newValue, oldValue) {
    //     console.log(this.$refs.svg);
    //     console.log(newValue);
    //     this.$refs.svg.stroke = newValue
    //   }
    // },
    computed: {
        precents() {
            let precent = this.precent > 100 ? 100 : this.precent
            return precent
        }
    },
}
</script>

<style>
.atooltip {
    padding: 5px 10px !important;
    font-size: 11px;
}
</style>

<style lang="less" scoped>
@leftData: 40px;
@leftData1: -37px;
.progressShip {
    position: relative;
    height: 70px;
    width: 195px;
    .shipImg {
        // width: 15px;
        // height: 15px;
        // background: black;
        // background: url('../../assets/icon/船.png');
        position: absolute;
        top: @leftData1;
        transition: all 0.5s linear;
        width: 195px;
        .img {
            position: relative;
            //   left: @leftData1;
            width: @leftData;
            height: @leftData;
            background: url("../../assets/icon/船.png");
            background-size: cover;
            transition: all 0.5s linear;
        }
        .tipBox11 {
           
            padding: 2px 3px;
            height: 12px;
            border-radius: 5px;
            background: #5f6b7d;
            position: absolute;
            top: 50px;
            text-align: center;
            transform: translateX(-50%);
            white-space: nowrap;
            color: #fff;
            transition: all 0.5s linear;
            &::after {
                content: "";
                width: 0px;
                height: 0px;
                position: absolute;
                left: 50%;
                bottom: 16px;
                transform: translateX(-50%);
                border-top: 5px solid transparent;
                border-right: 5px solid transparent; /*透明颜色的边框*/
                border-bottom: 5px solid #5f6b7d; /*透明颜色的边框*/
                border-left: 5px solid transparent; /*透明颜色的边框*/
            }
            p {
                font-size: 2px;
            }
        }
    }
}
/deep/ .el-progress-bar__outer {
    background-color: transparent;
}
</style>